<template>
  <div class="zuji">
    <!-- 头部 -->
    <van-nav-bar
      title="足迹"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 滑动单元格------------------------------------------------------------------ -->
    <van-swipe-cell  v-for="(item,i) of sy" :key="i">
      <!-- 卡片card -->
      <van-card
        :tag="item.tj[0]"
        :desc="item.btx"
        :title="item.bt"
        :thumb="item.tp"
      >
        <!-- 卡片标签 -->
        <template #tags>
          <van-tag plain type="danger">{{item.tj[1]}}</van-tag>
          <van-tag plain type="danger">{{item.tj[2]}}</van-tag>
          <van-tag plain type="danger">{{item.tj[3]}}</van-tag>
          <van-tag plain type="danger">{{item.tj[4]}}</van-tag>
        </template>
      </van-card>
      <!-- 卡片右边的删除键 -->
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>
   
  </div>
</template>
<script>
export default {
  data() {
    return {
     
        sy:[{ tp:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage-qzone.mamaquan.mama.cn%2Fupload%2F2020%2F04%2F25%2F3adc968cd0a34c1d87bfea6d83e386e0_w300X225_w196X147.jpg%3FimageView2%2F2%2Fw%2F800&refer=http%3A%2F%2Fimage-qzone.mamaquan.mama.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629042941&t=51c28a8408917870c840d7686ba78b55',
        bt:'小米粥',
        btx:'不一样的生活',
        tj:['推荐','好吃','好玩','好喝','好开心'],},
        {
        tp:require('../assets/wcf/100.jpg'),
        bt:'南瓜粥',
        btx:'不一样的生活',
        tj:['推荐','好吃','好玩','好喝','好开心'],
        },{
        tp:require('../assets/wcf/101.jpg'),
        bt:'土豆粥',
        btx:'不一样的生活',
        tj:['推荐','好吃','好玩','好喝','好开心'],
        },
        { tp:require('../assets/wcf/102.jpg'),
        bt:'小米粥',
        btx:'不一样的生活',
        tj:['推荐','好吃','好玩','好喝','好开心'],},
        {
        tp:require('../assets/wcf/103.jpg'),
        bt:'土豆粥',
        btx:'不一样的生活',
        tj:['推荐','好吃','好玩','好喝','好开心'],
        },
        {
        tp:require('../assets/wcf/104.jpg'),
        bt:'土豆粥',
        btx:'不一样的生活',
        tj:['推荐','好吃','好玩','好喝','好开心'],
        },
        {
        tp:require('../assets/wcf/106.jpg'),
        bt:'土豆粥',
        btx:'不一样的生活',
        tj:['推荐','好吃','好玩','好喝','好开心'],
        },
        {
        tp:require('../assets/wcf/107.jpg'),
        bt:'土豆粥',
        btx:'不一样的生活',
        tj:['推荐','好吃','好玩','好喝','好开心'],
        },
         {
        tp:require('../assets/wcf/104.jpg'),
        bt:'土豆粥',
        btx:'不一样的生活',
        tj:['推荐','好吃','好玩','好喝','好开心'],
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/wode");
    },
  },
};
</script>
<style>
/* 滑动单元格的样式     图片   与按钮 */
/* .zuji .goods-card {
  margin: 0;
  background-color: white;
} */
.zuji .delete-button {
  height: 100%;
}
</style>